<template>
  <div class="theme-demo">

    <h1>自定义主题</h1>

    <h2>颜色</h2>
    <!-- 文字颜色 -->
    <template v-for="(list,index) in fontColor" :key="index">
      <div class="theme-demo__title">{{ list.title }}</div>
      <div class="theme-demo__font-color-list">
        <div class="theme-demo__font-color-list__item" v-for="item in list.data" :key="item.clz">
          <div :class="item.clz">{{ item.desc }}</div>
          <div>.{{ item.clz }}</div>
        </div>
      </div>
    </template>
    <!-- 状态背景色 -->
    <div class="theme-demo__title">{{ statusBackground.title }}</div>
    <div class="theme-demo__background-color-list">
      <div class="theme-demo__background-color-list__item" v-for="item in statusBackground.data" :key="item.clz"
           :class="item.clz">
        <div>
          <span>{{ item.desc }}</span>
          <span>.{{ item.clz }}</span>
        </div>
        <div></div>
      </div>
    </div>
    <!-- 禁用背景色 -->
    <div class="theme-demo__title">{{ disabledBackgroundColor.title }}</div>
    <div class="theme-demo__background-color-list theme-demo__background-color-list--disabled">
      <div class="theme-demo__background-color-list__item" v-for="item in disabledBackgroundColor.data" :key="item.clz"
           :class="item.clz">
        <div>
          <span>{{ item.desc }}</span>
          <span>.{{ item.clz }}</span>
        </div>
        <div></div>
      </div>
    </div>

    <h2>组件</h2>
    <!-- Button组件 -->
    <div class="theme-demo__title">Button 按钮</div>
    <div class="theme-demo__space-line">
      <pl-button mode="fill">填充按钮</pl-button>
      <pl-button mode="stroke">线条按钮</pl-button>
      <pl-button mode="text">文字按钮</pl-button>
    </div>
    <div class="theme-demo__space-line">
      <pl-button mode="fill" label="基础(primary)" status="primary" @click="$message.primary(Date.now())"/>
      <pl-button mode="fill" label="成功(success)" status="success" @click="$message.success(Date.now())"/>
      <pl-button mode="fill" label="警告(warn)" status="warn" @click="$message.warn(Date.now())"/>
      <pl-button mode="fill" label="错误(error)" status="error" @click="$message.error(Date.now())"/>
      <pl-button mode="fill" label="帮助(info)" status="info" @click="$message.info(Date.now())"/>
    </div>
    <div class="theme-demo__space-line">
      <pl-button mode="stroke" label="基础(primary)" status="primary" @click="$message.primary(Date.now())"/>
      <pl-button mode="stroke" label="成功(success)" status="success" @click="$message.success(Date.now())"/>
      <pl-button mode="stroke" label="警告(warn)" status="warn" @click="$message.warn(Date.now())"/>
      <pl-button mode="stroke" label="错误(error)" status="error" @click="$message.error(Date.now())"/>
      <pl-button mode="stroke" label="帮助(info)" status="info" @click="$message.info(Date.now())"/>
    </div>
    <div class="theme-demo__space-line">
      <pl-button mode="text" label="基础(primary)" status="primary" @click="$message.primary(Date.now())"/>
      <pl-button mode="text" label="成功(success)" status="success" @click="$message.success(Date.now())"/>
      <pl-button mode="text" label="警告(warn)" status="warn" @click="$message.warn(Date.now())"/>
      <pl-button mode="text" label="错误(error)" status="error" @click="$message.error(Date.now())"/>
      <pl-button mode="text" label="帮助(info)" status="info" @click="$message.info(Date.now())"/>
    </div>
    <div class="theme-demo__space-line">
      <pl-button-group mode="fill">
        <pl-button label="丛林"/>
        <pl-button label="山脉"/>
        <pl-button label="火山"/>
      </pl-button-group>
    </div>

    <!--  -->
  </div>

</template>

<script>
import {defineComponent, reactive, toRefs} from 'vue';

export default defineComponent({
  name: "theme-demo",
  setup() {
    const state = reactive({
      fontColor: [
        {
          title: '状态字体色',
          data: [
            {desc: '基础文字', clz: 'v3-text-primary'},
            {desc: '成功文字', clz: 'v3-text-success'},
            {desc: '警告文字', clz: 'v3-text-warn'},
            {desc: '危险文字', clz: 'v3-text-error'},
            {desc: '提示文字', clz: 'v3-text-info'},
          ],
        },
        {
          title: '其他字体色',
          data: [
            {desc: '正文', clz: 'v3-text-color'},
            {desc: '正文(轻)', clz: 'v3-text-color-light'},
            {desc: '标题', clz: 'v3-title-color'},
            {desc: '占位符', clz: 'v3-placeholder-color'},
            {desc: '图标', clz: 'v3-icon-color'},
            {desc: '禁用文字', clz: 'v3-background-disabled-text'},
          ]
        }
      ],
      statusBackground: {
        title: '状态背景色',
        data: [
          {desc: '基础背景', clz: 'v3-background-primary'},
          {desc: '成功背景', clz: 'v3-background-success'},
          {desc: '警告背景', clz: 'v3-background-warn'},
          {desc: '危险背景', clz: 'v3-background-error'},
          {desc: '提示背景', clz: 'v3-background-info'},
        ]
      },
      disabledBackgroundColor: {
        title: '禁用背景色',
        data: [
          {desc: '禁用背景', clz: 'v3-background-disabled'},
          {desc: '禁用背景(轻)', clz: 'v3-background-disabled-light'},
          {desc: '禁用背景(深)', clz: 'v3-background-disabled-deep'},
        ]
      }
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss">
@import '../../../style/theme/index';

@include theme {
  .theme-demo__title {
    padding: 20px 0 10px 0;
    color: $itc;
  }

  .theme-demo__space-line {
    & > * {
      margin-right: 8px;
    }

    //& + & {
    //↑ 这么写 在这里(@include theme里)得到的是 ---> html .theme-demo__space-line + html .theme-demo__space-line
    //故要这么写↓
    & + .theme-demo__space-line {
      margin-top: 20px;
    }
  }

  .theme-demo__font-color-list {
    &__item {
      display: inline-block;
      width: 150px;
      margin-right: 8px;

      &, & > * {
        box-sizing: border-box;
      }

      div:first-child {
        padding: 12px 20px;
        font-size: 18px;
        border: solid 1px $ibl;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }

      div:last-child {
        background-color: $ibl;
        padding: 12px 20px;
        color: $itl;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .theme-demo__background-color-list {
    &__item {
      display: inline-block;
      width: 180px;
      border-radius: 4px;
      margin-right: 8px;

      &, & > * {
        box-sizing: border-box;
      }

      //文字+类名
      div:first-child {
        border: none;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        font-size: 18px;
        padding: 12px 20px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;

        & > span:last-child {
          font-size: 12px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      //下半部分背景色过渡块
      div:last-child {
        background-color: transparent;
        position: relative;
        padding: 12px 20px;

        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        //todo ↓不加这个 当窗口变窄时 一行变成两行 上下两行默认是没有间距的, 但加了这个overflow:hidden就有了 y?
        overflow: hidden;


        &:before {
          position: absolute;
          top: 0;
          left: 0;
          right: 50%;
          bottom: 0;
          background-color: rgba(white, 0.5);
          content: '';
        }

        &:after {
          position: absolute;
          top: 0;
          right: 0;
          left: 50%;
          bottom: 0;
          background-color: rgba(white, 0.85);
          content: '';
        }
      }
    }

    &--disabled {
      .theme-demo__background-color-list__item {
        &:not(:last-child) {
          border: solid 1px $ibc;
        }

        & > div {
          & > span:first-child {
            color: $ihc;
          }

          & > span:last-child {
            color: $itc;
          }
        }
      }
    }
  }
}
</style>
